<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>管理员操作日志</title>
  <!-- 引入layui CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui-src/dist/css/layui.css">
  <!-- 引入Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  <!-- 引入ECharts -->
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
  <style>
    body {
      background-color: #F8FAFC;
      padding: 20px;
      margin: 0;
    }
    .layui-card {
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
      border-radius: 6px;
      overflow: hidden;
      margin-bottom: 20px;
    }
    .layui-card-header {
      background-color: #F8FAFC;
      border-bottom: 1px solid #F1F5F9;
      padding: 14px 20px;
      font-size: 16px;
      font-weight: 500;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .filter-bar {
      padding: 15px 20px;
      background-color: #F8FAFC;
      border-bottom: 1px solid #F1F5F9;
    }
    .layui-form-item {
      margin-bottom: 15px;
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: center;
    }
    .layui-form-label {
      padding: 9px 15px;
      color: #334155;
      font-weight: 500;
      width: auto;
    }
    .layui-input, .layui-select {
      border-radius: 4px;
      padding: 9px 15px;
    }
    .layui-btn {
      border-radius: 4px;
    }
    .chart-container {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      padding: 20px;
      box-sizing: border-box;
    }
    .chart-item {
      flex: 1;
      min-width: 300px;
      height: 300px;
    }
    .data-stats {
      display: flex;
      flex-wrap: wrap;
      gap: 15px;
      padding: 0 20px 15px;
    }
    .stat-item {
      flex: 1;
      min-width: 150px;
      background-color: #FFFFFF;
      border-radius: 6px;
      padding: 15px;
      text-align: center;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
      position: relative;
    }
    .stat-item::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 4px;
      height: 100%;
    }
    .stat-total::before {
      background-color: #3B82F6;
    }
    .stat-today::before {
      background-color: #10B981;
    }
    .stat-error::before {
      background-color: #EF4444;
    }
    .stat-value {
      font-size: 28px;
      font-weight: 600;
      color: #1E293B;
      margin: 5px 0;
    }
    .stat-label {
      font-size: 14px;
      color: #64748B;
    }
    .stat-icon {
      font-size: 22px;
      margin-bottom: 5px;
    }
    .footer {
      text-align: center;
      color: #95A5A6;
      font-size: 12px;
      margin-top: 30px;
      padding-top: 15px;
      border-top: 1px solid #F1F5F9;
    }
    .table-container {
      padding: 0 20px 20px;
    }
    .layui-table {
      margin: 0;
      border-radius: 6px;
    }
    .operation-content {
      max-width: 300px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .status-tag {
      display: inline-block;
      padding: 2px 8px;
      border-radius: 4px;
      font-size: 12px;
      color: white;
    }
    .status-success {
      background-color: #10B981;
    }
    .status-warning {
      background-color: #F59E0B;
    }
    .status-error {
      background-color: #EF4444;
    }
  </style>
</head>
<body>
  <!-- 核心数据统计卡片 -->
  <div class="layui-card">
    <div class="layui-card-header">
      <h3><i class="fa fa-list-alt"></i> 操作日志统计</h3>
      <div>
        <button class="layui-btn layui-btn-primary" id="refreshDataBtn">
          <i class="fa fa-refresh"></i> 刷新
        </button>
        <button class="layui-btn layui-btn-primary" id="exportDataBtn">
          <i class="fa fa-download"></i> 导出
        </button>
      </div>
    </div>
    <div class="layui-card-body">
      <div class="data-stats">
        <div class="stat-item stat-total">
          <div class="stat-icon" style="color: #3B82F6;"><i class="fa fa-file-text-o"></i></div>
          <div class="stat-value">12,587</div>
          <div class="stat-label">总日志数</div>
        </div>
        <div class="stat-item stat-today">
          <div class="stat-icon" style="color: #10B981;"><i class="fa fa-calendar"></i></div>
          <div class="stat-value">356</div>
          <div class="stat-label">今日操作数</div>
        </div>
        <div class="stat-item stat-error">
          <div class="stat-icon" style="color: #EF4444;"><i class="fa fa-exclamation-triangle"></i></div>
          <div class="stat-value">24</div>
          <div class="stat-label">异常操作数</div>
        </div>
      </div>
    </div>
  </div>

  <!-- 操作类型分布 -->
  <div class="layui-card">
    <div class="layui-card-header">
      <h3><i class="fa fa-pie-chart"></i> 操作类型分布</h3>
    </div>
    <div class="layui-card-body">
      <div class="chart-container">
        <div class="chart-item" id="operationTypeChart"></div>
      </div>
    </div>
  </div>

  <!-- 日志筛选与列表 -->
  <div class="layui-card">
    <div class="layui-card-header">
      <h3><i class="fa fa-search"></i> 操作日志查询</h3>
    </div>
    <div class="filter-bar">
      <form class="layui-form" lay-filter="logFilterForm">
        <div class="layui-form-item">
          <label class="layui-form-label">时间范围</label>
          <div class="layui-input-inline" style="width: 220px;">
            <input type="text" name="timeRange" placeholder="请选择时间范围" autocomplete="off" class="layui-input" id="timeRange">
          </div>
          
          <label class="layui-form-label">操作用户</label>
          <div class="layui-input-inline" style="width: 150px;">
            <input type="text" name="username" placeholder="请输入用户名" autocomplete="off" class="layui-input">
          </div>
          
          <label class="layui-form-label">操作类型</label>
          <div class="layui-input-inline" style="width: 150px;">
            <select name="operationType">
              <option value="">全部类型</option>
              <option value="login">登录</option>
              <option value="add">新增</option>
              <option value="edit">编辑</option>
              <option value="delete">删除</option>
              <option value="query">查询</option>
              <option value="export">导出</option>
              <option value="setting">设置</option>
            </select>
          </div>
          
          <label class="layui-form-label">操作状态</label>
          <div class="layui-input-inline" style="width: 150px;">
            <select name="operationStatus">
              <option value="">全部状态</option>
              <option value="success">成功</option>
              <option value="warning">警告</option>
              <option value="error">失败</option>
            </select>
          </div>
          
          <button class="layui-btn" lay-submit lay-filter="searchBtn"><i class="fa fa-search"></i> 查询</button>
          <button type="reset" class="layui-btn layui-btn-primary"><i class="fa fa-refresh"></i> 重置</button>
        </div>
      </form>
    </div>
    <div class="table-container">
      <table class="layui-table" lay-size="sm">
        <thead>
          <tr>
            <th style="width: 60px;">序号</th>
            <th>操作时间</th>
            <th>操作用户</th>
            <th>操作类型</th>
            <th>操作内容</th>
            <th>IP地址</th>
            <th>操作状态</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>2023-09-18 15:32:45</td>
            <td>admin</td>
            <td>登录</td>
            <td>
              <div class="operation-content" title="管理员登录系统">管理员登录系统</div>
            </td>
            <td>192.168.1.102</td>
            <td><span class="status-tag status-success">成功</span></td>
          </tr>
          <tr>
            <td>2</td>
            <td>2023-09-18 15:28:12</td>
            <td>zhangwei</td>
            <td>编辑</td>
            <td>
              <div class="operation-content" title="编辑项目信息：基于深度学习的图像识别研究平台">编辑项目信息：基于深度学习的图像识别研究平台</div>
            </td>
            <td>192.168.1.115</td>
            <td><span class="status-tag status-success">成功</span></td>
          </tr>
          <tr>
            <td>3</td>
            <td>2023-09-18 15:15:36</td>
            <td>liming</td>
            <td>删除</td>
            <td>
              <div class="operation-content" title="删除过期文章：2022年度学术会议汇总">删除过期文章：2022年度学术会议汇总</div>
            </td>
            <td>192.168.1.108</td>
            <td><span class="status-tag status-success">成功</span></td>
          </tr>
          <tr>
            <td>4</td>
            <td>2023-09-18 14:58:22</td>
            <td>wanghong</td>
            <td>新增</td>
            <td>
              <div class="operation-content" title="新增用户：zhaoli@university.edu">新增用户：zhaoli@university.edu</div>
            </td>
            <td>192.168.1.122</td>
            <td><span class="status-tag status-warning">警告</span></td>
          </tr>
          <tr>
            <td>5</td>
            <td>2023-09-18 14:32:15</td>
            <td>unknown</td>
            <td>登录</td>
            <td>
              <div class="operation-content" title="尝试使用管理员账号登录系统">尝试使用管理员账号登录系统</div>
            </td>
            <td>203.0.113.45</td>
            <td><span class="status-tag status-error">失败</span></td>
          </tr>
          <tr>
            <td>6</td>
            <td>2023-09-18 14:15:47</td>
            <td>admin</td>
            <td>导出</td>
            <td>
              <div class="operation-content" title="导出项目活跃度分析报表">导出项目活跃度分析报表</div>
            </td>
            <td>192.168.1.102</td>
            <td><span class="status-tag status-success">成功</span></td>
          </tr>
          <tr>
            <td>7</td>
            <td>2023-09-18 13:58:32</td>
            <td>sunjie</td>
            <td>设置</td>
            <td>
              <div class="operation-content" title="修改系统通知设置">修改系统通知设置</div>
            </td>
            <td>192.168.1.110</td>
            <td><span class="status-tag status-success">成功</span></td>
          </tr>
        </tbody>
      </table>
    </div>
    <div style="text-align: right; padding: 15px 20px; border-top: 1px solid #F1F5F9;">
      <div class="layui-box layui-laypage layui-laypage-default">
        <a href="javascript:;" class="layui-laypage-prev layui-disabled">上一页</a>
        <span class="layui-laypage-curr"><em class="layui-laypage-em"></em><em>1</em></span>
        <a href="javascript:;">2</a>
        <a href="javascript:;">3</a>
        <span class="layui-laypage-spr">…</span>
        <a href="javascript:;">42</a>
        <a href="javascript:;" class="layui-laypage-next">下一页</a>
        <span class="layui-laypage-count">共 826 条</span>
      </div>
    </div>
  </div>
  
  <!-- 页脚信息 -->
  <div class="footer">
    © 系统管理平台 - 版权所有
  </div>

  <!-- 引入layui JS -->
  <script src="https://cdn.jsdelivr.net/npm/layui-src/dist/layui.js"></script>
  <script>
    // 初始化layui模块
    layui.use(['form', 'laydate', 'layer'], function() {
      const form = layui.form;
      const laydate = layui.laydate;
      const layer = layui.layer;
      
      // 渲染表单
      form.render();
      
      // 初始化日期选择器
      laydate.render({
        elem: '#timeRange',
        range: true,
        theme: 'molv'
      });
      
      // 查询按钮点击事件
      form.on('submit(searchBtn)', function(data) {
        layer.load();
        
        setTimeout(function() {
          layer.closeAll('loading');
          layer.msg('查询完成，共找到 28 条记录', {icon: 1, time: 1500});
        }, 800);
        
        return false;
      });
      
      // 刷新数据按钮
      document.getElementById('refreshDataBtn').addEventListener('click', function() {
        layer.load();
        
        setTimeout(function() {
          layer.closeAll('loading');
          layer.msg('日志数据已刷新', {icon: 1, time: 1000});
        }, 1000);
      });
      
      // 导出数据按钮
      document.getElementById('exportDataBtn').addEventListener('click', function() {
        layer.confirm('确定要导出操作日志数据吗？', {
          btn: ['导出Excel', '取消']
        }, function(index) {
          layer.close(index);
          layer.load();
          
          setTimeout(function() {
            layer.closeAll('loading');
            layer.msg('日志数据导出成功', {icon: 1, time: 1500});
          }, 1500);
        });
      });
      
      // 初始化操作类型分布图表
      function initOperationTypeChart() {
        const chartDom = document.getElementById('operationTypeChart');
        const myChart = echarts.init(chartDom);
        const option = {
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 10,
            data: ['登录', '新增', '编辑', '删除', '查询', '导出', '设置']
          },
          series: [
            {
              name: '操作类型',
              type: 'pie',
              radius: '70%',
              data: [
                { value: 3256, name: '登录', itemStyle: { color: '#3B82F6' } },
                { value: 1254, name: '新增', itemStyle: { color: '#10B981' } },
                { value: 2158, name: '编辑', itemStyle: { color: '#F59E0B' } },
                { value: 856, name: '删除', itemStyle: { color: '#EF4444' } },
                { value: 3567, name: '查询', itemStyle: { color: '#8B5CF6' } },
                { value: 685, name: '导出', itemStyle: { color: '#EC4899' } },
                { value: 811, name: '设置', itemStyle: { color: '#6366F1' } }
              ]
            }
          ]
        };
        
        myChart.setOption(option);
        
        // 窗口大小变化时重绘图表
        window.addEventListener('resize', function() {
          myChart.resize();
        });
      }
      
      // 页面加载完成后初始化图表
      window.addEventListener('load', function() {
        initOperationTypeChart();
      });
    });
  </script>
</body>
</html>
